import React from 'react';
import {inject, observer} from 'mobx-react';
import { Route, withRouter, Switch } from 'react-router-dom';
import { TabPage , routeBackToUpperlevel } from 'weaver-mobile-page';
import MemberDetail from './memberDetail'
import { Tools } from 'weaver-mobile';
const getLabel = Tools.getLabel;

@inject('viewMeetingStore')
@routeBackToUpperlevel
@withRouter
@observer
class CrmData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      span: [4,1],
      nowTab:0
    };
  }
  componentDidMount() {
    //param[0:总人数,1:确定参加,2:不参加,3:未提交回执]
    const { getMemberCount , setState } = this.props.viewMeetingStore;
    let tempMemberPage = parseInt(sessionStorage.meetingMemberNowTab,10);
    let tempMemberType = parseInt(sessionStorage.meetingMemberType,10);
    setState({memberType:tempMemberType,selectType:tempMemberType})
    this.setState({nowTab:tempMemberPage})
    this.getMemberData(tempMemberPage);
    getMemberCount();
    if(sessionStorage&&sessionStorage.meetingMemberNowTab){
      this.setState({ nowTab: parseInt(sessionStorage.meetingMemberNowTab,10) })
    }
  }

  componentWillReceiveProps (nextProps) {
    const prePath = this.props.location.pathname;
    const curPath = nextProps.location.pathname;
    if (curPath && curPath !== prePath) {
      this.setPage(curPath);
    }
  }

  setPage = (path) => {
    const { getMemberCount } = this.props.viewMeetingStore;
    if (path.indexOf('/calendar/detail/member/crmData/allMember') > -1) { 
      this.setState({ nowTab: 0 }); 
      this.getMemberData(0);
      getMemberCount(); 
      sessionStorage.setItem("meetingMemberNowTab",0); 
    }
    if (path.indexOf('/calendar/detail/member/crmData/attend') > -1) { 
      this.setState({ nowTab: 1 }); 
      this.getMemberData(1);
      getMemberCount(); 
      sessionStorage.setItem("meetingMemberNowTab",1); 
    }
    if (path.indexOf('/calendar/detail/member/crmData/unAttend') > -1) { 
      this.setState({ nowTab: 2 }); 
      this.getMemberData(2);
      getMemberCount(); 
      sessionStorage.setItem("meetingMemberNowTab",2); 
    }
    if (path.indexOf('/calendar/detail/member/crmData/unWrite') > -1) { 
      this.setState({ nowTab: 3 }); 
      this.getMemberData(3);
      getMemberCount(); 
      sessionStorage.setItem("meetingMemberNowTab",3); 
    }
  }


  getMemberData = (key) =>{
    const { setState, getMember } = this.props.viewMeetingStore;
    setState({selectType:key})
    getMember();
    
  }

     // 点击tab页切换
   changeTab = (tab,index) => {
    //param[0:总人数,1:确定参加,2:不参加,3:未提交回执]
    const { getMemberCount } = this.props.viewMeetingStore;
    // getMemberCount();
    // this.getMemberData(tab.key);
    switch(tab.key) {
      case 0: this.setPath(index, '/calendar/detail/member/crmData/allMember'); sessionStorage.setItem("meetingMemberNowTab",0); break;
      case 1: this.setPath(index, '/calendar/detail/member/crmData/attend'); sessionStorage.setItem("meetingMemberNowTab",1); break;
      case 2: this.setPath(index, '/calendar/detail/member/crmData/unAttend'); sessionStorage.setItem("meetingMemberNowTab",2); break;
      case 3: this.setPath(index, '/calendar/detail/member/crmData/unWrite'); sessionStorage.setItem("meetingMemberNowTab",3); break;
      default: return;
    }
  }

  setPath = (key, path) => {
    this.props.history.push(path);
  }

  getTopTabs = ()=>{
    const { memberDetailCount } = this.props.viewMeetingStore;
    let { memberType } = this.props;
    const tabs = [];
    const cardInfo = [
        {title: memberType==='1'?getLabel(2166, '应到人数'):getLabel(391077, '应到客户经理'),key:0 , color:'#333333',countFlg:'allCrmAttend'},
        {title: getLabel(391078, '确定参加'),key:1, color:'#55B1F9',countFlg:'crmAttend'},
        {title: getLabel(389541, '不参加'),key:2, color:'#FE9900',countFlg:'crmUnAttend'},
        {title: getLabel(391079, '未提交回执'),key:3 , color:'#999999',countFlg:'crmUnWrite'},
    ];
    // const { counts } = this.props.wfStatusStore;
    cardInfo.map(item =>{
        const key = item.key;
        const tab = (
            <div>
                <div style={{color:item.color,height:'15px',textAlign:'center'}}>{memberDetailCount[`${item.countFlg}`]}</div>
                <div style={{color:"#868686"}}>{item.title}</div>
            </div>
        )
       tabs.push({key:key, title: tab});
    });
    return tabs;
  }

  render() {
    let tabPanes = this.getTopTabs();
    const tabProps = {
      onChange: (tab,index) => { this.changeTab(tab,index) },
      page:this.state.nowTab,
      
    };
    return (
      <div>
        <TabPage
          tabs={tabPanes}
          tabProps={tabProps}
        />
        <Switch>
          <Route
            key="allCrm"
            path="/calendar/detail/member/crmData/allMember"
            render={()=>(
              <MemberDetail />
            )}
          />
          <Route
            key="crmAttend"
            path="/calendar/detail/member/crmData/attend"
            render={()=>(
              <MemberDetail />
            )}
          />
          <Route
            key="crmUnAttend"
            path="/calendar/detail/member/crmData/unAttend"
            render={()=>(
              <MemberDetail />
            )}
          />
          <Route
            key="crmUnWrite"
            path="/calendar/detail/member/crmData/unWrite"
            render={()=>(
              <MemberDetail />
            )}
          />
          {/* <Redirect exact path="/calendar/detail/member/crmData" to={{pathname: '/calendar/detail/memberData/crmData/allMember'}} /> */}
          </Switch>
      </div>
    )
  }

  getTabPanes = () => {
    let { memberType} = this.props;
    let tabArray = [];
    tabArray.push( { title: memberType==='1'?getLabel(2166, '应到人数'):getLabel(391077, '应到客户经理'),key:0 });
    tabArray.push( { title: getLabel(391078, '确定参加'),key:1 });
    tabArray.push( { title: getLabel(389541, '不参加'),key:2 });
    tabArray.push( { title: getLabel(391079, '未提交回执'),key:3 });
    return tabArray;
  }
}

export default CrmData;